<template>
  <section class="cart-board cover">
    <div class="container">
      <ul class="cart-board-title">
        <li>选择</li>
        <li>商品名称</li>
        <li>图片</li>
        <li>单价</li>
        <li>数量</li>
        <li>小计</li>
        <li>操作</li>
      </ul>
      <div
        class="cart-item"
        v-for="(item, index) in cartData"
        :key="item.productId"
      >
        <div class="cart-item-select">
          <input
            type="checkbox"
            :checked="item.checked"
            @click="editCart('check', index)"
          />
        </div>
        <div class="cart-item-name">{{ item.productName }}</div>
        <div class="cart-item-img">
          <img
            :src="'/images/' + item.productImage"
            alt="小米移动电源3 10000mAh快充版 黑色"
          />
        </div>
        <div class="cart-item-price">{{ item.productPrice | currency }}</div>
        <div class="cart-item-count">
          <div class="count-area">
            <a
              class="lk-count"
              href="javascript:;"
              @click="editCart('minus', index)"
              >-</a
            >
            <span class="middle-text">{{ item.productCount }}</span>
            <a
              class="lk-count"
              href="javascript:;"
              @click="editCart('plus', index)"
              >+</a
            >
          </div>
        </div>
        <div class="cart-item-total">
          {{ (item.productPrice * item.productCount) | currency }}
        </div>
        <div class="cart-item-remove">
          <a href="javascript:;" @click="delItem(item)">删除</a>
        </div>
      </div>
      <div class="cart-board-footer">
        <div class="total-price">
          <span class="price-text">
            总价： <span class="price-num">{{ totalPrice | currency }}</span>
          </span>
          <button class="total-btn" @click="checkout">结算</button>
        </div>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import axios from "axios";
import { Vue, Component } from "vue-property-decorator";
import { cartBoardItem } from "../../types/index";

@Component({
  name: "CartBoard",
  //过滤器
  filters: {
    currency: function (value: number) {
      if (!value) {
        return "0.00";
      }

      value = value * 1;

      //保留2位
      return "￥" + value.toFixed(2);
    },
  },
})
export default class CartBoard extends Vue {
  //保存请求的数据到cartData属性
  //该数组保存的数据类型要符合接口定义的数据类型
  private cartData: cartBoardItem[] = [];

  getCardData() {
    axios.get("/mock/cart.json").then((response) => {
      const res = response.data;
      const data = res.data;

      /**
       * console.log(res.data);
       * [
       *   {productId: '001', productName: '小米移动电源3 10000mAh快充版 银色', productPrice: 67, productCount: 3, productImage: '1.jpg', …},
       *   {productId: '002', productName: '小米真无线蓝牙耳机Air2 SE 白色', productPrice: 129, productCount: 2, productImage: '2.jpg', …},
       *   {productId: '003', productName: '米家电磁炉青春版 白色', productPrice: 179, productCount: 3, productImage: '3.jpg', …},
       *   {productId: '004', productName: '米家石墨烯踢脚线电暖器 白色', productPrice: 699, productCount: 1, productImage: '4.jpg', …},
       *   {productId: '005', productName: '小米手环6 黑色', productPrice: 219, productCount: 1, productImage: '5.jpg', …}
       * ]
       */

      this.cartData = data;
    });
  }

  //修改当前商品数量
  editCart(option: string, index: number) {
    switch (option) {
      case "minus":
        if (this.cartData[index].productCount > 0) {
          this.cartData[index].productCount--;
        }
        break;
      case "plus":
        this.cartData[index].productCount++;
        break;
      case "check":
        this.cartData[index].checked = !this.cartData[index].checked;
        break;
      default:
        break;
    }
  }

  //删除当前商品
  delItem(item: cartBoardItem) {
    this.cartData.forEach((element, idx) => {
      //如果遍历数组的某一项对象里的id和当前点击的那一项id相同时
      if (element.productId === item.productId) {
        //删除该项
        this.cartData.splice(idx, 1);
      }
    });
  }

  //计算属性：依赖关系存在时使用计算属性解决
  //如总价依赖单价数量的计算得来
  get totalPrice() {
    let tPrice = 0;

    //循环数组拿到最新修改的数量
    this.cartData.forEach((element, idx) => {
      //只有在当前勾选的商品时
      if (element.checked) {
        //总价 = 每项勾选的单击 * 每项勾选的数量 的 总和
        tPrice += element.productPrice * element.productCount;
      }
    });

    return tPrice;
  }

  //点击结算按钮
  checkout() {
    //跳转到地址页面
    this.$router.push("/address");
  }

  //加载当前组件时获取数据
  created() {
    this.getCardData();
  }
}
</script>

<style lang="scss" scoped>
$item-total-width: 1226px;

.cart-board {
  .container {
    width: 1226px;
    margin: 0 auto;
    background: #fff;

    .cart-board-title {
      display: flex;
      height: 3rem;
      background: #ddd;

      li {
        display: flex;
        justify-content: center;
        align-items: center;

        &:nth-child(1) {
          width: $item-total-width * 1/ 15;
        }

        &:nth-child(2) {
          width: $item-total-width * 4/ 15;
        }

        &:nth-child(3) {
          width: $item-total-width * 2/ 15;
        }

        &:nth-child(4) {
          width: $item-total-width * 2/ 15;
        }

        &:nth-child(5) {
          width: $item-total-width * 2/ 15;
        }

        &:nth-child(6) {
          width: $item-total-width * 2/ 15;
        }

        &:nth-child(7) {
          width: $item-total-width * 2/ 15;
        }
      }
    }

    .cart-item {
      display: flex;
      height: 10rem;
      line-height: 10rem;
      text-align: center;
      // justify-content: center;
      border-bottom: 1px solid #ddd;

      .cart-item-select {
        width: $item-total-width * 1/ 15;
      }

      .cart-item-name {
        width: $item-total-width * 4/ 15;
      }

      .cart-item-img {
        margin: 15px auto;
        width: $item-total-width * 2/ 15;

        img {
          height: 100%;
        }
      }

      .cart-item-price {
        width: $item-total-width * 2/ 15;
        font-size: 16px;
      }

      .cart-item-count {
        width: $item-total-width * 2/ 15;
        font-size: 16px;

        .count-area {
          margin-top: 60px;
          margin-left: 16px;
          width: 130px;
          height: 38px;
          border: 1px solid #e0e0e0;
          text-align: center;
          background-color: #fff;

          .lk-count {
            float: left;
            width: 38px;
            height: 38px;
            line-height: 38px;
            color: #757575;
            font-size: 20px;
          }

          .middle-text {
            float: left;
            width: 52px;
            height: 38px;
            line-height: 38px;
            padding: 0;
            color: #424242;
            font-size: 16px;
            text-align: center;
          }
        }
      }

      .cart-item-total {
        width: $item-total-width * 2/ 15;
      }

      .cart-item-remove {
        width: $item-total-width * 2/ 15;
      }
    }

    .cart-board-footer {
      text-align: right;
      height: 3rem;
      line-height: 3rem;

      .total-price {
        .price-num {
          color: #ff6700;
        }

        .total-btn {
          width: 200px;
          height: 48px;
          line-height: 48px;
          font-size: 18px;
          margin-left: 50px;
          background-color: #ff6700;
          color: #fff;
        }
      }
    }
  }
}
</style>